<template>
  <div class="monitor-deploy" v-loading="loading">
    <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="0">
      <el-card>
        <tag-content-header>
          <template #title>
            <span class="title-text">数据质量</span>
          </template>
        </tag-content-header>
        <div class="section-content">
          <div class="section-content-title">
            <span>数据覆盖率预警</span>
          </div>
          <div class="section-content-box slider-box">
            <div class="slider-title">覆盖比例</div>
            <el-form-item prop="data_coverage_warning">
              <tag-slider
                v-model="editForm.data_coverage_warning"
                :max="1"
                :step="0.05"
                :marks="marks"
                range
                :disabled="!editable"
              ></tag-slider>
            </el-form-item>
          </div>
        </div>
      </el-card>

      <el-card>
        <tag-content-header>
          <template #title>
            <span class="title-text">应用热度</span>
          </template>
        </tag-content-header>

        <div class="section-content">
          <div class="section-content-title">
            <span>用户情感反馈</span>
          </div>
          <el-row>
            <el-col :span="24">
              <div class="section-content-box slider-box" :style="{ paddingLeft: '180px' }">
                <div class="slider-title">情感倾向阈值</div>
                <el-form-item prop="affective_tendency_threshold">
                  <tag-slider
                    v-model="editForm.affective_tendency_threshold"
                    :max="1"
                    :step="0.05"
                    :marks="marks"
                    range
                    :disabled="!editable"
                  ></tag-slider>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <div class="section-content-title"><span>标签热度预警</span></div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="section-content-box">
                <div class="deploy-title abnorm">预警</div>
                <el-form-item label="浏览量(小于)" prop="tag_popularity_views.warning" label-width="110px">
                  <el-input-number
                    v-model="editForm.tag_popularity_views.warning"
                    :min="0"
                    :step="1"
                    step-strictly
                    :disabled="!editable"
                  ></el-input-number>
                </el-form-item>
                <el-form-item label="调用量(小于)" prop="tag_popularity_usage.warning" label-width="110px">
                  <el-input-number
                    v-model="editForm.tag_popularity_usage.warning"
                    :min="0"
                    :step="1"
                    step-strictly
                    :disabled="!editable"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="section-content-box">
                <div class="deploy-title good">良好</div>
                <el-form-item label="浏览量(小于)" prop="tag_popularity_views.excellent" label-width="110px">
                  <el-input-number
                    v-model="editForm.tag_popularity_views.excellent"
                    :min="0"
                    :step="1"
                    step-strictly
                    :disabled="!editable"
                  ></el-input-number>
                </el-form-item>
                <el-form-item label="调用量(小于)" prop="tag_popularity_usage.excellent" label-width="110px">
                  <el-input-number
                    v-model="editForm.tag_popularity_usage.excellent"
                    :min="0"
                    :step="1"
                    step-strictly
                    :disabled="!editable"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="section-content-box">
                <div class="deploy-title excellent">优秀</div>
                <el-form-item label="浏览量(大于)" prop="tag_popularity_views.excellent" label-width="110px">
                  <el-input-number
                    v-model="editForm.tag_popularity_views.excellent"
                    :min="0"
                    :step="1"
                    step-strictly
                    disabled
                  ></el-input-number>
                </el-form-item>
                <el-form-item label="调用量(大于)" prop="tag_popularity_usage.excellent" label-width="110px">
                  <el-input-number
                    v-model="editForm.tag_popularity_usage.excellent"
                    :min="0"
                    :step="1"
                    step-strictly
                    disabled
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row class="cycle-box">
            <el-col :span="24" align="center">
              <div class="section-content-box">
                <el-form-item label="周期" prop="tagHeatCycle.cycle" label-width="100px">
                  <el-form-item prop="tagHeatCycle.num" :style="{ marginRight: '20px' }">
                    <el-input-number
                      v-model="editForm.tagHeatCycle.num"
                      :min="0"
                      :step="1"
                      step-strictly
                      :disabled="!editable"
                    ></el-input-number>
                  </el-form-item>
                  <el-radio-group v-model="editForm.tagHeatCycle.cycle" :disabled="!editable">
                    <el-radio label="day">
                      日
                    </el-radio>

                    <el-radio label="month">
                      月
                    </el-radio>

                    <el-radio label="year">
                      年
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <div class="section-content-title"><span>用户自评预警</span></div>
          <el-row :gutter="20" :style="{ marginBottom: 0 }">
            <el-col :span="8">
              <div class="section-content-box">
                <div class="deploy-title abnorm">预警</div>
                <el-form-item label="信息准确性星级(小于)" prop="accuracy_info_rank.warning" label-width="160px">
                  <el-input-number
                    v-model="editForm.accuracy_info_rank.warning"
                    :min="0"
                    :precision="1"
                    :disabled="!editable"
                  ></el-input-number>
                </el-form-item>
                <el-form-item label="数据准确性星级(小于)" prop="accuracy_data_rank.warning" label-width="160px">
                  <el-input-number
                    v-model="editForm.accuracy_data_rank.warning"
                    :min="0"
                    :precision="1"
                    :disabled="!editable"
                  ></el-input-number>
                </el-form-item>
                <el-form-item label="数据时效性星级(小于)" prop="timeliness_info.warning" label-width="160px">
                  <el-input-number
                    v-model="editForm.timeliness_info.warning"
                    :min="0"
                    :precision="1"
                    :disabled="!editable"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="section-content-box">
                <div class="deploy-title good">良好</div>
                <el-form-item label="信息准确性星级(小于)" prop="accuracy_info_rank.excellent" label-width="160px">
                  <el-input-number
                    v-model="editForm.accuracy_info_rank.excellent"
                    :min="0"
                    :precision="1"
                    :disabled="!editable"
                  ></el-input-number>
                </el-form-item>
                <el-form-item label="数据准确性星级(小于)" prop="accuracy_data_rank.excellent" label-width="160px">
                  <el-input-number
                    v-model="editForm.accuracy_data_rank.excellent"
                    :min="0"
                    :precision="1"
                    :disabled="!editable"
                  ></el-input-number>
                </el-form-item>
                <el-form-item label="数据时效性星级(小于)" prop="timeliness_info.excellent" label-width="160px">
                  <el-input-number
                    v-model="editForm.timeliness_info.excellent"
                    :min="0"
                    :precision="1"
                    :disabled="!editable"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="section-content-box">
                <div class="deploy-title excellent">优秀</div>
                <el-form-item label="信息准确性星级(大于)" prop="accuracy_info_rank.excellent" label-width="160px">
                  <el-input-number
                    v-model="editForm.accuracy_info_rank.excellent"
                    :min="0"
                    :precision="1"
                    disabled
                  ></el-input-number>
                </el-form-item>
                <el-form-item label="数据准确性星级(大于)" prop="accuracy_data_rank.excellent" label-width="160px">
                  <el-input-number
                    v-model="editForm.accuracy_data_rank.excellent"
                    :min="0"
                    :precision="1"
                    disabled
                  ></el-input-number>
                </el-form-item>
                <el-form-item label="数据时效性星级(大于)" prop="timeliness_info.excellent" label-width="160px">
                  <el-input-number
                    v-model="editForm.timeliness_info.excellent"
                    :min="0"
                    :precision="1"
                    disabled
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <div class="section-content-box num-box">
            <el-form-item label="起始自评人数" prop="userEvaluation.num" label-width="120px">
              <el-input-number
                v-model="editForm.userEvaluation.num"
                :min="0"
                :step="1"
                step-strictly
                :disabled="!editable"
              ></el-input-number>
              人
            </el-form-item>
          </div>
        </div>
      </el-card>
    </el-form>
    <div class="deploy-handler">
      <el-button type="primary" v-show="!editable" @click="editable = true">编辑</el-button>
      <el-button v-show="editable" @click="cancelEdit">取消</el-button>
      <el-button type="primary" v-show="editable" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      marks: {
        0: '0',
        0.1: '0.1',
        0.2: '0.2',
        0.3: '0.3',
        0.4: '0.4',
        0.5: '0.5',
        0.6: '0.6',
        0.7: '0.7',
        0.8: '0.8',
        0.9: '0.9',
        1: '1'
      },
      loading: false,
      editable: false,
      editForm: {
        data_coverage_warning: [0, 0],
        tag_popularity_views: {
          excellent: '',
          warning: ''
        },
        tagHeatCycle: {
          cycle: '',
          num: 1
        },
        tag_popularity_usage: {
          excellent: '',
          warning: ''
        },
        accuracy_info_rank: {
          excellent: '',
          warning: ''
        },
        accuracy_data_rank: {
          excellent: '',
          warning: ''
        },
        timeliness_info: {
          excellent: '',
          warning: ''
        },
        userEvaluation: {
          num: 1
        },
        affective_tendency_threshold: [0, 0]
      },
      config: {},
      editFormRules: {
        'tag_popularity_views.excellent': [
          { required: true, message: '浏览量不能为空', trigger: 'blur' },
          { validator: this.excellentValidator, trigger: 'blur' }
        ],
        'tag_popularity_views.warning': [{ required: true, message: '浏览量不能为空', trigger: 'blur' }],
        'tag_popularity_usage.excellent': [
          { required: true, message: '调用量不能为空', trigger: 'blur' },
          { validator: this.excellentValidator, trigger: 'blur' }
        ],
        'tag_popularity_usage.warning': [{ required: true, message: '调用量不能为空', trigger: 'blur' }],
        'tagHeatCycle.cycle': [{ required: true, message: '周期必须选择', trigger: 'change' }],
        'tagHeatCycle.num': [{ required: true, message: '周期不能为空', trigger: 'blur' }],
        'accuracy_info_rank.excellent': [
          { required: true, message: '星级不能为空', trigger: 'blur' },
          { validator: this.excellentValidator, trigger: 'blur' }
        ],
        'accuracy_info_rank.warning': [{ required: true, message: '星级不能为空', trigger: 'blur' }],
        'accuracy_data_rank.excellent': [
          { required: true, message: '星级不能为空', trigger: 'blur' },
          { validator: this.excellentValidator, trigger: 'blur' }
        ],
        'accuracy_data_rank.warning': [{ required: true, message: '星级不能为空', trigger: 'blur' }],
        'timeliness_info.excellent': [
          { required: true, message: '星级不能为空', trigger: 'blur' },
          { validator: this.excellentValidator, trigger: 'blur' }
        ],
        'timeliness_info.warning': [{ required: true, message: '星级不能为空', trigger: 'blur' }],
        'userEvaluation.num': [{ required: true, message: '自评人数不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    excellentValidator(rule, value, callback) {
      const field = rule.fullField.split('.')[0]
      if (value <= this.editForm[field].warning) callback(new Error('优秀、良好值必须大于预警值'))
      else callback()
    },
    warningValidator(rule, value, callback) {
      const field = rule.fullField.split('.')[0]
      if (value >= this.editForm[field].warning) callback(new Error('预警值必须小于优秀、良好值'))
      else callback()
    },
    getDetail() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('tag/tagWarningConfig/getTagWarningConfig'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.config = JSON.parse(data.data.warningConfig)
          this.initData()
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    initData() {
      this.editForm.data_coverage_warning = [
        Number(this.config.data_coverage_warning.warning),
        Number(this.config.data_coverage_warning.excellent)
      ]
      this.editForm.tag_popularity_views.excellent = Number(this.config.tag_popularity.excellent.views_num)
      this.editForm.tag_popularity_views.warning = Number(this.config.tag_popularity.warning.views_num)
      this.editForm.tagHeatCycle.cycle = this.config.tag_popularity.tag_heat_cycle.cycle
      this.editForm.tagHeatCycle.num = Number(this.config.tag_popularity.tag_heat_cycle.cycle_num)
      this.editForm.tag_popularity_usage.excellent = Number(this.config.tag_popularity.excellent.usage_num)
      this.editForm.tag_popularity_usage.warning = Number(this.config.tag_popularity.warning.usage_num)
      this.editForm.accuracy_info_rank.excellent = Number(this.config.user_evaluation.excellent.accuracy_info_rank)
      this.editForm.accuracy_info_rank.warning = Number(this.config.user_evaluation.warning.accuracy_info_rank)
      this.editForm.accuracy_data_rank.excellent = Number(this.config.user_evaluation.excellent.accuracy_data_rank)
      this.editForm.accuracy_data_rank.warning = Number(this.config.user_evaluation.warning.accuracy_data_rank)
      this.editForm.timeliness_info.excellent = Number(this.config.user_evaluation.excellent.timeliness_info)
      this.editForm.timeliness_info.warning = Number(this.config.user_evaluation.warning.timeliness_info)
      this.editForm.userEvaluation.num = Number(this.config.user_evaluation.num)
      this.editForm.affective_tendency_threshold = [
        Number(this.config.affective_tendency_threshold.warning),
        Number(this.config.affective_tendency_threshold.excellent)
      ]
    },
    cancelEdit() {
      this.initData()
      this.editable = false
    },
    submit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          let config = {
            data_coverage_warning: {
              excellent: this.editForm.data_coverage_warning[1],
              warning: this.editForm.data_coverage_warning[0],
              weight: ''
            },
            tag_popularity: {
              excellent: {
                views_num: this.editForm.tag_popularity_views.excellent,
                usage_num: this.editForm.tag_popularity_usage.excellent
              },
              warning: {
                views_num: this.editForm.tag_popularity_views.warning,
                usage_num: this.editForm.tag_popularity_usage.warning
              },
              tag_heat_cycle: {
                cycle: this.editForm.tagHeatCycle.cycle,
                cycle_num: this.editForm.tagHeatCycle.num
              }
            },
            user_evaluation: {
              excellent: {
                accuracy_info_rank: this.editForm.accuracy_info_rank.excellent,
                accuracy_data_rank: this.editForm.accuracy_data_rank.excellent,
                timeliness_info: this.editForm.timeliness_info.excellent
              },
              warning: {
                accuracy_info_rank: this.editForm.accuracy_info_rank.warning,
                accuracy_data_rank: this.editForm.accuracy_data_rank.warning,
                timeliness_info: this.editForm.timeliness_info.warning
              },
              num: this.editForm.userEvaluation.num
            },
            affective_tendency_threshold: {
              excellent: this.editForm.affective_tendency_threshold[1],
              warning: this.editForm.affective_tendency_threshold[0],
              weight: ''
            }
          }
          this.loading = true
          this.$ajax({
            url: this.$ajax.setUrl('tag/tagWarningConfig/updateTagWarningConfig'),
            method: 'post',
            data: this.$ajax.setData({
              warningConfig: JSON.stringify(config)
            })
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.msg)
              this.editable = false
              this.getDetail()
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.monitor-deploy {
  margin-bottom: 60px;
  .el-card {
    margin-bottom: 20px;
  }
  .tag-content-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }
  .section-title {
    padding: 5px 15px;
    border-bottom: 1px solid #eee;
    position: relative;
    &:before {
      width: 5px;
      content: '';
      background-color: #3ab2d0;
      position: absolute;
      top: 7px;
      left: 0;
      bottom: 7px;
    }
  }
  .section-content {
    padding: 20px 200px;
  }
  .section-content-title {
    font-size: 17px;
    text-align: center;
    margin-bottom: 20px;
    span {
      display: inline-block;
      padding: 0 20px;
      position: relative;
      &:before,
      &:after {
        width: 80px;
        height: 4px;
        content: '';
        border-radius: 2px;
        background-color: #ccc;
        position: absolute;
        top: 8px;
      }
      &:before {
        left: -80px;
      }
      &:after {
        right: -80px;
      }
    }
  }
  .section-content-box {
    padding: 20px;
    background-color: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 4px;
  }
  .slider-box {
    padding-left: 150px;
    position: relative;
  }
  .slider-title {
    padding: 10px 20px;
    color: #fff;
    background-color: #3ab2d0;
    border-radius: 4px;
    position: absolute;
    top: 25px;
    left: 20px;
    &:after {
      width: 10px;
      height: 10px;
      content: '';
      background-color: #3ab2d0;
      position: absolute;
      top: 12.5px;
      right: -5px;
      transform: rotate(45deg);
    }
  }
  .deploy-title {
    font-size: 15px;
    padding: 10px 0;
    margin-bottom: 20px;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    &.abnorm {
      background-color: #f98c6a;
    }
    &.good {
      background-color: #54c6e2;
    }
    &.excellent {
      background-color: #65d496;
    }
  }
  .el-row:not(:last-of-type) {
    margin-bottom: 50px;
  }
  .num-box {
    margin: 10px 0 50px 0;
    text-align: center;
    .el-form-item {
      display: inline-block;
    }
    .el-input-number {
      width: 200px;
      .el-input__inner {
        padding-left: 20px;
        padding-right: 20px;
      }
    }
  }
  .cycle-box {
    margin-top: -40px;
    .el-input-number {
      width: 100px;
      .el-input__inner {
        padding-left: 20px;
        padding-right: 20px;
      }
    }
    .el-form-item {
      display: inline-block;
    }
  }
  .deploy-handler {
    padding: 10px;
    background-color: #fff;
    text-align: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: fixed;
    right: 20px;
    bottom: 20px;
    left: 280px;
  }
  .el-input-number {
    width: 100%;
    .el-input-number__decrease,
    .el-input-number__increase {
      display: none;
    }
    .el-input.is-disabled .el-input__inner {
      color: #606266;
    }
  }
  .el-radio__input.is-disabled + span.el-radio__label {
    color: #606266;
    cursor: default;
  }
}
</style>
